<!--
 * @Author: Mark
 * @Date: 2019-02-02 09:43:26
 * @LastEditors: Mark
 * @LastEditTime: 2019-02-02 09:58:12
 * @Description: 自定义卡片
 -->
<template>
  <div>
    <el-card
      :body-style="cardBodyStyle"
      class="box-card"
      shadow="hover"
    >
      <div
        slot="header"
        class="clearfix"
      >
        <h2 class="title">{{data.title}}</h2>
      </div>
      <div class="content">{{data.content}}</div>
    </el-card>
  </div>
</template>

<script>
export default {
  props:{
    data : Object,
    required :true
  },
  data () {
    return {
      cardBodyStyle : {
        background:'#E4E7ED',
      },
    };
  },

  components: {},

  mounted() {
    this.init()
  },

  computed: {},

  methods: {
    init(){
      this.cardBodyStyle.background = this.data.color
    }
  }
}

</script>
<style lang='scss' scoped>
.box-card {
  height: 250px;
  .title {
    text-align: left;
  }
  .content {
    text-align: center;
    height: 150px;
    line-height: 150px;
    font-size: 50px;
  }

}
</style>